<template>
  <el-container class="unique-part">
    <!-- 头部组件 -->
    <el-header>
      <div class="test">
        <div class="welcome">
          <span>{{this.testData}}</span>
        </div>
        <!-- 选项卡 -->
        <div class="header-choice">
          <el-tabs
            v-model="editableTabsValue"
            type="card"
            :closable="this.editableTabs.length != 1"
            @tab-remove="removeTab"
            @tab-click="handleClick"
          >
            <el-tab-pane
              v-for="item in editableTabs"
              :key="item.path"
              :label="item.name"
              :name="item.name"
            >
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <!-- 头像及下拉菜单 -->
      <div class="drop">
        <!-- <el-dropdown trigger="click" size="small">
          <el-avatar
            shape="square"
            :src="url"
            class="el-dropdown right-menu-item user-avatar"
          ></el-avatar>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="signout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown trigger="click" size="small">
          <i
            class="el-icon-arrow-down el-dropdown right-menu-item"
            style="cursor: pointer"
          ></i>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="this.$router.push('/welcome')"
                >首页</el-dropdown-item
              >
              <el-dropdown-item divided @click="signout"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown> -->
        <span @click="signout" style="cursor: pointer; font-weight: 800; color: #536B97">退出登录</span>
      </div>
    </el-header>

    <el-container>
      <!-- 侧边栏组件 -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <!-- 收缩按钮 -->
        <div class="svg" @click="setIsCollapse">
          <el-icon v-if="isCollapse == false"><caret-left /></el-icon>
          <el-icon v-else><caret-right /></el-icon>
        </div>
        <!-- 菜单栏 -->
        <el-menu
          :default-active="activate"
          :collapse="isCollapse"
          background-color="#304156"
          text-color="#BFCBD9"
          unique-opened
          active-text-color="#3491FF"
          router
          :collapse-transition="false"
        >
          <el-sub-menu
            :index="item.id + ''"
            class="submenu"
            v-for="item in menulist"
            :key="item.id"
          >
            <template #title>
              <el-icon>
                <avatar v-if="item.name == '个人门户'" />
                <document v-if="item.name == '学术成果'" />
              </el-icon>
              <span> {{ item.name }} </span>
            </template>
            <el-menu-item
              :index="subItem.path"
              v-for="subItem in item.children"
              :key="subItem.id"
              @click="
                setDefault(subItem.path), addTab(subItem.name, subItem.path)
              "
            >
              <i class="el-icon-menu"></i>
              <span> {{ subItem.name }} </span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>

      <el-container>
        <!-- main组件 -->
        <el-main>
          <router-view></router-view>
        </el-main>
        <!-- <el-footer></el-footer> -->
      </el-container>
      <!-- <el-footer> </el-footer> -->
    </el-container>
  </el-container>
</template>

<script>
  // import axios from "axios";
  import { Avatar, CaretLeft, CaretRight, Document } from "@element-plus/icons";
  // import axios from "axios";

  export default {
    components: {
      Avatar,
      CaretLeft,
      CaretRight,
      Document,
    },
    data() {
      return {
        testData: '欢迎您，管理员！',
        isCollapse: false,
        menulist: [
          {
            id: 0,
            name: "个人门户",
            path: "",
            children: [
              {
                id: 1,
                name: "个人门户管理",
                path: "/users",
              },
              // {
              //   id: 6,
              //   name: "研究机构管理",
              //   path: "/company"
              // },
              {
                id: 2,
                name: "审核门户认领",
                path: "/portalAudit",
              },
            ],
          },
          {
            id: 3,
            name: "学术成果",
            path: "",
            children: [
              {
                id: 4,
                name: "学术成果管理",
                path: "/achievement",
              },
              {
                id: 5,
                name: "审核学术成果",
                path: "/achievementAudit",
              },
              {
                id: 6,
                name: "学术成果申诉",
                path: "/appeal"
              }
            ],
          },
        ],
        activate: "/users",
        editableTabs: [],
        editableTabsValue: "",
        url: "",
      };
    },
    created() {
      this.activate = sessionStorage.getItem("default");
      if (sessionStorage.getItem("tabs") != null) {
        this.editableTabs = JSON.parse(sessionStorage.getItem("tabs"));
        this.editableTabsValue = JSON.parse(sessionStorage.getItem("tabsvalue"));
      }
      // axios.get("admin/userinfo/").then((response) => {
      //   this.url = "http://8.140.186.185:8080" + response.data.user.avatar;
      // });
    },
    methods: {
      setDefault(activate) {
        sessionStorage.setItem("default", activate);
        this.activate = activate;
      },
      setIsCollapse() {
        this.isCollapse = !this.isCollapse;
      },
      addTab(tabname, path) {
        console.log(path);
        this.editableTabsValue = tabname;
        for (let i = 0; i < this.editableTabs.length; i++) {
          if (this.editableTabs[i].name == tabname) {
            return;
          }
        }
        this.editableTabs.push({
          name: tabname,
          path: path,
        });

        this.activate = path;
        sessionStorage.setItem("default", this.activate);
        sessionStorage.setItem("tabs", JSON.stringify(this.editableTabs));
        sessionStorage.setItem(
          "tabsvalue",
          JSON.stringify(this.editableTabsValue)
        );
      },
      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }

        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
        for (let i = 0; i < this.editableTabs.length; i++) {
          if (this.editableTabs[i].name === activeName) {
            this.$router.push(this.editableTabs[i].path);
            this.activate = this.editableTabs[i].path;
            sessionStorage.setItem("default", this.activate);
          }
        }

        sessionStorage.setItem("tabs", JSON.stringify(this.editableTabs));
        sessionStorage.setItem(
          "tabsvalue",
          JSON.stringify(this.editableTabsValue)
        );
      },
      handleClick(tab, event) {
        console.log(event);
        for (let i = 0; i < this.editableTabs.length; i++) {
          if (this.editableTabs[i].name === tab.paneName) {
            this.editableTabsValue = tab.paneName;
            this.activate = this.editableTabs[i].path;
            sessionStorage.setItem("default", this.activate);
            sessionStorage.setItem(
              "tabsvalue",
              JSON.stringify(this.editableTabsValue)
            );
            this.$router.push(this.editableTabs[i].path);
            return;
          }
        }
      },
      signout() {
        localStorage.setItem("admin", "false");
        this.$router.push("/adminlogin");
      },
    },
  };
</script>

<style scoped>
/* 变量声明 主要是色号 */
:root {
  --left: #536b97;
  --table-head: #697fa4;
  --bottom-left: #aab5ca;
  --upper-right: #e4e7ec;
}

.welcome {
  display: flex;
  align-items: center;
  color: var(--left);
  height: 100%;
  width:31%;
  font-weight: bold;
}

.el-container {
  height: 100%;
  font-family: "微软雅黑";
}

.el-header {
  background-color: #fff;
  display: flex;
  padding-left: 0;
  align-items: center;
  height: 45px;
  align-content: center;
  justify-content: space-between;
}

.el-tabs {
  margin-left: 20px;
  align-content: center;
  width: 100%;
}

.el-header > div > span {
  margin-left: 15px;
}

.el-header > div {
  text-align: center;
}

.el-aside {
  background-color: var(--left);
  transition: 0.2s;
}

.el-main {
  /* background-color: #eaedf1; */
  /* background: linear-gradient(to right top, #2982e0, #6cdbeb); */
  background: linear-gradient(
    to right top,
    var(--bottom-left),
    var(--upper-right)
  );
}

.test {
  width: 50%;
  display: flex;
  margin-left: 20px;
  height: 100%;
}

.submenu {
  width: 200px;
}

.el-aside > .el-menu {
  border-right: none;
}

.svg {
  padding: auto;
  align-items: center;
  display: flex;
  justify-content: center;
  align-content: center;
  margin-top: 10px;
  margin-bottom: 5px;
  color: #fff;
  font-size: 25px;
}

.svg > i {
  cursor: pointer;
}

.el-popper {
  position: relative;
}

.header-choice {
  width: 100%;
  display: flex;
  align-items: center;
}

.component-fade-enter-active,
.component-fade-leave-active {
  transition: opacity 0.3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
  opacity: 0;
}

.el-dropdown-menu {
  font-family: "微软雅黑";
}

.el-avatar {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.drop {
  display: flex;
  align-items: center;
}
</style>
